<template>
  <div class="app-container">
    <el-steps :active="active" finish-status="success" process-status="finish" simple>
      <el-step title="选择商品分类" />
      <el-step title="填写商品信息" />
      <el-step title="设置商品属性" />
      <el-step title="设置商品库存" />
    </el-steps>

    <GoodsCategory
      v-show="active == 0"
      v-if="loading == true"
      v-model="goodsInfo"
      @prev="prev"
      @next="next"
    />
    <GoodsInfo
      v-show="active == 1"
      v-if="loading == true"
      v-model="goodsInfo"
      @prev="prev"
      @next="next"
    />
    <GoodsAttribute
      v-show="active == 2"
      v-if="loading == true"
      v-model="goodsInfo"
      @prev="prev"
      @next="next"
    />
    <GoodsStock
      v-show="active == 3"
      v-if="loading == true"
      v-model="goodsInfo"
      @prev="prev"
      @next="next"
    />
  </div>
</template>

<script setup lang="ts">
import { getSpuDetail } from '@/api/pms/goods'
import { GoodsDetail } from '@/api/pms/goods/types'
import GoodsCategory from './components/GoodsCategory.vue'
import GoodsInfo from './components/GoodsInfo.vue'
import GoodsAttribute from './components/GoodsAttribute.vue'
import GoodsStock from './components/GoodsStock.vue'
import { onMounted } from 'vue'
import { useRoute } from 'vue-router'
const state = reactive({
  loading: false,
  active: 0,
  goodsInfo: {
    album: [],
    attrList: [],
    specList: [],
    skuList: []
  } as GoodsDetail
})
const { loading, active, goodsInfo } = toRefs(state)
const route = useRoute()
const loadData = () => {
  const goodsId = route.query.goodsId as string

  if (goodsId) {
    getSpuDetail(goodsId).then((res) => {
      console.log(res)

      state.goodsInfo = res.data
      state.goodsInfo.originPrice = (state.goodsInfo.originPrice as any) / 100
      state.goodsInfo.price = (state.goodsInfo.price as any) / 100
      state.loading = true
    })
  } else {
    state.loading = true
  }
}
const prev = () => {
  if (state.active-- <= 0) {
    state.active = 0
  }
}
const next = () => {
  if (state.active++ >= 3) {
    state.active = 3
  }
}
onMounted(() => {
  loadData()
})
</script>

<style scoped>
</style>